<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增页面')" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <input id="id" type="hidden" th:value="${id}">
        <form class="form-horizontal m" id="form-page-add">
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script th:inline="javascript">
        var prefix = ctx + "page/page"
        $("#form-page-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            var rows = $("#bootstrap-table").bootstrapTable('getSelections');
            if (!rows || rows.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            var ids = [];
            for (var i=0; i<rows.length; i++) {
                ids.push(rows[i].id);
            }
            $.operate.save(prefix + "/deleteImgs?ids=" + ids.join(), null);
        }

        function remove(id) {
            var config = {
                url: prefix + "/deleteImg?id=" + id,
                type: "POST",
                dataType: "json",
                async: false,
                data: null,
                success: function (result) {
                    $.table.search();
                }
            };
            $.ajax(config);
        }

        $("body").on('click', ".img", function(e) {
            if(e.preventDefault){
                e.preventDefault();
            }else{
                window.event.returnValue == false;
            }
            var url = $(this).attr("src");
            var json = {
                "title": "预览",
                "start": 0,
                "data": [{
                    "src": url,
                }]
            };
            layer.photos({
                photos: json,
                closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        })

        var prefix = ctx + "page/page";

        $(function() {
            var options = {
                url: prefix + "/listImg?id="+$("#id").val(),
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                height:500,
                modalName: "图片",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: 'ID',
                        visible: false
                    },
                    {
                        field: 'fileName',
                        title: '图片名称',
                        formatter: function(value, row, index) {
                            return "<span class='img' src='"+row.filePath+"'>"+value+"</span>";
                        }
                    },
                    {
                        field: 'imgType',
                        title: '图片类型',
                        formatter: function(value, row, index) {
                            if(value=='1') {
                                return '图片';
                            }
                            return '组件图';
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>